<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>系统监控仪表盘</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        body {
            font-family: 'Segoe UI', sans-serif;
            background-color: #1e1e2f;
            color: white;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 20px;
        }

        .dashboard {
            width: 90vw;
            max-width: 800px;
            text-align: center;
        }

        .metric-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-top: 30px;
        }

        .metric-box {
            background: #2c2c3d;
            padding: 20px;
            border-radius: 10px;
            box-shadow: 0 0 20px rgba(255, 255, 255, 0.1);
        }

        canvas {
            width: 100%;
            height: auto;
            border-radius: 50%;
            background-color: #2c2c3d;
        }

        .value {
            font-size: 1.5em;
            margin: 10px 0;
            font-weight: bold;
        }

        .network-info {
            margin-top: 20px;
            padding: 15px;
            background: #2c2c3d;
            border-radius: 8px;
            width: 100%;
            text-align: left;
        }
    </style>
</head>
<body>
    <div class="dashboard">
        <h1>系统实时监控</h1>
        <div class="metric-container">
            <div class="metric-box">
                <canvas id="cpuGauge" width="150" height="150"></canvas>
                <div class="value" id="cpuUsage">-</div>
                <div>CPU 使用率</div>
            </div>
            <div class="metric-box">
                <canvas id="memoryGauge" width="150" height="150"></canvas>
                <div class="value" id="memoryUsage">-</div>
                <div>内存使用</div>
            </div>
        </div>
        
        <div class="metric-container">
            <div class="metric-box">
                <div class="value" id="diskUsage">-</div>
                <div>系统盘使用</div>
            </div>
            <div class="metric-box">
                <div class="value" id="gpuUsage">-</div>
                <div>GPU 使用率</div>
            </div>
        </div>

        <div class="">
            <h3>网络状态：</h3>
            <div id="networkSpeed"></div>
        </div>
    </div>

    <script>
        // 仪表盘配置
        const gaugeConfig = {
            needleColor: "#00ffcc",
            arcColors: {
                background: "#444",
                foreground: "#00ffcc"
            }
        };

        // 初始化仪表盘
        function createGauge(canvasId, maxValue) {
            const canvas = document.getElementById(canvasId);
            const ctx = canvas.getContext('2d');
            const centerX = canvas.width / 2;
            const centerY = canvas.height / 2;
            const radius = Math.min(canvas.width, canvas.height) / 2 - 10;

            function draw(percentage) {
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                
                // 绘制背景弧
                ctx.beginPath();
                ctx.arc(centerX, centerY, radius, -Math.PI * 0.75, Math.PI * 0.75);
                ctx.strokeStyle = gaugeConfig.arcColors.background;
                ctx.lineWidth = 12;
                ctx.stroke();

                // 绘制前景弧
                ctx.beginPath();
                ctx.arc(centerX, centerY, radius, -Math.PI * 0.75, 
                        -Math.PI * 0.75 + (Math.PI * 1.5) * percentage);
                ctx.strokeStyle = gaugeConfig.arcColors.foreground;
                ctx.lineWidth = 12;
                ctx.stroke();

                // 绘制指针
                const angle = -Math.PI * 0.75 + (Math.PI * 1.5) * percentage;
                ctx.beginPath();
                ctx.moveTo(centerX, centerY);
                ctx.lineTo(
                    centerX + (radius - 15) * Math.cos(angle),
                    centerY + (radius - 15) * Math.sin(angle)
                );
                ctx.strokeStyle = gaugeConfig.needleColor;
                ctx.lineWidth = 3;
                ctx.stroke();
            }

            return { draw };
        }

        // 创建仪表盘实例
        const cpuGauge = createGauge('cpuGauge', 100);
        const memoryGauge = createGauge('memoryGauge', 100);

        // 更新数据
        async function updateData() {
            try {
                const response = await fetch('/system-info');
                const data = await response.json();
                
                // 更新CPU使用率
                cpuGauge.draw(data.cpu_usage / 100);
                document.getElementById('cpuUsage').textContent = 
                    `${data.cpu_usage.toFixed(1)}%`;

                // 更新内存使用
                const [used, total] = data.memory_usage.split('/').map(s => 
                    parseFloat(s.trim().replace('GB', ''))
                );
                memoryGauge.draw(used / total);
                document.getElementById('memoryUsage').textContent =
                    data.memory_usage;

                // 更新磁盘使用
                document.getElementById('diskUsage').textContent = 
                    data.disk_usage[0].split(':')[1].trim();

                // 更新GPU使用率
                document.getElementById('gpuUsage').textContent = 
                    `${data.gpu_usage.toFixed(1)}%`;

                // 更新网络状态
                document.getElementById('networkSpeed').innerHTML = 
                    data.network_speed.map(speed => 
                        `<div>${speed}</div>`
                    ).join('');

            } catch (error) {
                console.error('获取数据失败:', error);
            }
        }

        // 每2秒更新一次数据
        setInterval(updateData, 2000);
        updateData();
    </script>
</body>
</html>